<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="business_detail" v-loading="loading">
    <div class="back">
      <span>业务场景详情</span> <el-tooltip content="返回"><img :src="back" alt="" @click="goBack" /></el-tooltip>
    </div>
    <div class="basic_info">
      <div class="title">
        <div @click="infoFold = !infoFold">
          <el-icon color="#8E8E8E" v-if="infoFold"><CaretBottom /></el-icon>
          <el-icon color="#8E8E8E" v-if="!infoFold"><CaretTop /></el-icon>
          <div>基本信息</div>
        </div>
        <div>
          <el-button type="primary" link size="small" @click="modifyBasic">编辑</el-button>
        </div>
      </div>
      <div class="info" v-show="!infoFold">
        <div class="item">
          <span>业务场景名称：</span>
          <span>{{ businessData?.name }}</span>
        </div>
        <div class="row2">
          <div class="item">
            <span>创建人：</span>
            <span>{{ businessData?.createByName }}</span>
          </div>
          <div class="item">
            <span>创建时间：</span>
            <span>{{ businessData?.createTime }}</span>
          </div>
        </div>
        <div class="item">
          <span>业务场景描述：</span>
          <span>{{ businessData?.description }}</span>
        </div>
        <div class="item">
          <span>使用目的：</span>
          <span>{{ businessData?.purpose }}</span>
        </div>
      </div>
    </div>
    <div class="business_map">
      <div class="title">
        <div @click="mapFold = !mapFold">
          <el-icon color="#8E8E8E" v-if="mapFold"><CaretBottom /></el-icon>
          <el-icon color="#8E8E8E" v-if="!mapFold"><CaretTop /></el-icon>
          <div>业务地图</div>
        </div>
        <div>
          <el-button type="primary" link size="small" @click="modifyMap">编辑</el-button>
        </div>
      </div>
      <div class="info" v-show="!mapFold">
        <div class="card_item" v-for="(item, index) in mapData" :key="item">
          <div class="card_title">
            <div>{{ index + 1 }}</div>
            <el-tooltip :content="item.name" placement="top">
              <div>{{ item.name }}</div>
            </el-tooltip>
          </div>
          <div class="content" :id="item.index">
            <div class="database_item" v-for="(el, index) in item.databases" :id="index + 'el'" :key="el">
              <img :src="dataBaseImg" alt="" />
              <div class="database_name">
                {{ el?.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="基本信息编辑" v-model="basicModifyVisible">
      <el-form size="small" label-width="120">
        <el-form-item label="业务场景名称：" required>
          <el-input style="width: 400px" v-model="basicForm.name" placeholder="请输入场景名称" />
        </el-form-item>
        <el-form-item label="业务场景描述：" required>
          <el-input style="width: 400px" v-model="basicForm.description" placeholder="请输入场景描述" />
        </el-form-item>
        <el-form-item label="使用目的：">
          <el-input v-model="basicForm.purpose" style="width: 400px" :rows="2" type="textarea" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="basicModifyVisible = false">取消</el-button>
          <el-button size="small" type="primary" @click="submitBasic"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="业务地图编辑" v-model="mapModifyVisible" width="800" @close="mapModifyVisible = false">
      <div style="height: 400px">
        <BusinessMap :key="mapRefresh" :mapData="businessMapData" v-if="mapModifyVisible" :isView="false" @handleData="handleData" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="mapModifyVisible = false">取消</el-button>
          <el-button size="small" type="primary" @click="submitMap"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script name="BusinessDetail" setup>
import BusinessMap from './BusinessMap.vue';
import back from '@/assets/images/back.svg';
import dataBaseImg from '@/assets/images/database.svg';
import { getBusinessDetail, updateBusiness } from '@/api/metaData/index';
const props = defineProps(['data']);
const infoFold = ref(false);
const mapFold = ref(false);
const basicModifyVisible = ref(false);
const mapModifyVisible = ref(false);
const emit = defineEmits(['goback']);
const basicForm = ref({ name: '', description: '', purpose: '' });
const businessMapData = ref([]);
const businessData = ref(null);
const mapRefresh = ref(false);
const loading = ref(false);
//业务地图初始化数据
const mapData = ref([]);
//返回
const goBack = () => {
  emit('goback');
};
// 修改业务地图
const modifyMap = () => {
  mapModifyVisible.value = true;
  mapRefresh.value = true;
  nextTick(() => {
    mapRefresh.value = false;
  });
};
//修改基本信息
const modifyBasic = () => {
  basicModifyVisible.value = true;
  basicForm.value.name = businessData.value.name;
  basicForm.value.description = businessData.value.description;
  basicForm.value.purpose = businessData.value.purpose;
};
// 提交基本信息
const submitBasic = () => {
  //数据校验
  if (!basicForm.value.name) {
    ElMessage({ showClose: true, message: '请输入场景名称！', type: 'warning' });
    return;
  }
  if (!basicForm.value.description) {
    ElMessage({ showClose: true, message: '请输入场景描述！', type: 'warning' });
    return;
  }
  // 提交
  const params = { ...businessData.value };
  params.name = basicForm.value.name;
  params.description = basicForm.value.description;
  params.purpose = basicForm.value.purpose;
  params.children.forEach((el) => {
    delete el.id;
  });
  updateBusiness(params)
    .then((res) => {
      if (res) {
        ElMessage({ showClose: true, message: '修改成功！', type: 'success' });
        basicModifyVisible.value = false;
        getBusinessInfo();
      }
    })
    .catch(() => {
      ElMessage({ showClose: true, message: '修改失败！', type: 'error' });
    });
};
//提交业务地图信息
const submitMap = () => {
  const params = { ...businessData.value };
  const children = businessMapData.value.map((el) => {
    let databases = [];
    if (el.databases.length > 0) {
      databases = el.databases.map((item) => {
        return item.id;
      });
    }
    return { name: el.name, description: el?.description, purpose: el?.purpose, databaseIds: databases.toString(), sort: el.index };
  });
  params.children = children;
  updateBusiness(params)
    .then((res) => {
      if (res) {
        ElMessage({ showClose: true, message: '修改成功！', type: 'success' });
        mapModifyVisible.value = false;
        getBusinessInfo();
      }
    })
    .catch(() => {
      ElMessage({ showClose: true, message: '修改失败！', type: 'error' });
    });
};
//接收map组件数据-更新后
const handleData = (data) => {
  if (data?.data) {
    businessMapData.value = data?.data;
  }
};
//查询业务场景详情
const getBusinessInfo = () => {
  loading.value = true;
  getBusinessDetail(props.data?.id)
    .then((res) => {
      if (res) {
        businessData.value = res.data;
        const cards = res?.data?.children || [];
        mapData.value = cards.map((el) => {
          return { name: el.name, index: el.sort, databases: el.databaseVoList || [] };
        });
        //初始化map缓存数据
        businessMapData.value = cards.map((el) => {
          return { name: el.name, index: el.sort, databases: el.databaseVoList || [] };
        });
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
onMounted(() => {
  getBusinessInfo();
});
</script>
<style lang="scss" scoped>
.business_detail {
  height: 100%;
  width: 100%;
  padding: 10px;
  overflow: auto;
  .back {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    > img {
      height: 20px;
      width: 20px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .basic_info {
    width: 100%;
    font-size: 12px;
    .title {
      background: #fafafa;
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
      padding: 0 10px;
      > div:nth-child(1) {
        display: flex;
        cursor: pointer;
        > div:nth-child(3) {
          font-weight: 600;
        }
      }
    }
    .info {
      padding: 10px;
      .item {
        margin-bottom: 5px;
        > span:nth-child(2) {
          color: #909399;
        }
      }
      .row2 {
        display: flex;
        > div:nth-child(2) {
          margin-left: 30%;
        }
      }
    }
  }
  .business_map {
    font-size: 12px;
    .title {
      background: #fafafa;
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
      padding: 0 10px;
      > div:nth-child(1) {
        display: flex;
        cursor: pointer;
        > div:nth-child(3) {
          font-weight: 600;
        }
      }
    }
    .info {
      width: 100%;
      height: calc(100vh - 315px);
      // height: calc(100% - 60px);
      border: 1px solid #d9d9d9;
      margin-top: 10px;
      display: flex;
      overflow-x: auto;
      border-radius: 8px;
      .card_item {
        height: 100%;
        min-width: 120px;
        margin-right: 10px;
        border: 1px solid #d9d9d9;
        background: #fcf8e9;
        border-radius: 8px;
        position: relative;
        .close {
          position: absolute;
          right: -5px;
          top: -5px;
          cursor: pointer;
        }
        .card_title {
          width: 100%;
          height: 40px;
          display: flex;
          font-size: 12px;
          align-items: center;
          justify-content: center;
          > div:nth-child(1) {
            height: 20px;
            width: 20px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            text-align: center;
            line-height: 20px;
          }
          > div:nth-child(2) {
            margin-left: 4px;
            max-width: 50px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          > div:nth-child(3) {
            margin-left: 4px;
            height: 20px;
            width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
        }
        .content {
          height: calc(100% - 50px);
          background: #fff;
          margin: 0 10px 10px 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: auto;
          .database_item {
            height: 60px;
            width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #d9d9d9;
            justify-content: center;
            margin: 8px;
            border-radius: 4px;
            position: relative;
            > img {
              height: 32%;
              width: 32px;
            }
            .database_name {
              font-size: 12px;
              margin-top: 6px;
              width:100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              text-align: center;
            }
            .close {
              position: absolute;
              right: -5px;
              top: -5px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>